<template>
  <div class="form-designer arco-container">
    <a-card class="arco-card" title="表单设计器">
      <!-- 工具栏 -->
      <div class="arco-toolbar">
        <a-button type="primary" @click="exportSchema">导出 JSON</a-button>
      </div>

      <!-- 主内容区 -->
      <div class="arco-main-content">
        <!-- 左侧组件列表 -->
        <div class="arco-sidebar">
          <a-card title="组件列表" :bordered="false">
            <div 
              v-for="comp in componentList" 
              :key="comp.type"
              draggable
              @dragstart="handleDragStart($event, comp)"
              class="component-item arco-component-item"
            >
              {{ comp.label }}
            </div>
          </a-card>
        </div>

        <!-- 中间表单画布 -->
        <div class="arco-content">
          <a-card title="表单画布" :bordered="false">
            <div 
              class="form-canvas arco-form-canvas"
              @drop="handleDrop"
              @dragover.prevent
              @dragenter.prevent
              @dragleave.prevent
              @dragstart="(e) => console.log('画布检测到拖拽开始', e)"
              @dragover="(e) => console.log('画布检测到拖拽经过', e)"
            >
              <div v-if="formFields.length === 0" class="empty-tip arco-empty-tip">
                拖拽组件到此处
              </div>

              <VueDraggableNext 
                v-model="formFields"
                item-key="id"
                group="form-items"
                @end="handleDragEnd"
                :animation="150"
              >
                <template #item="{ element }">
                  <div class="form-field arco-form-field" @click="selectField(element.id)">
                    <component
                      :is="element.type"
                      v-bind="element.props"
                      :placeholder="element.props.placeholder || `请输入${element.label}`"
                    />
                    <div class="field-actions arco-field-actions">
                      <a-button type="text" @click.stop="removeField(element.id)">删除</a-button>
                    </div>
                  </div>
                </template>
              </VueDraggableNext>
            </div>
          </a-card>
        </div>

        <!-- 右侧属性配置 -->
        <div class="arco-sidebar-right">
          <a-card title="属性配置" :bordered="false" v-if="selectedField">
            <a-form :model="selectedField.props" layout="vertical">
              <a-form-item label="字段名">
                <a-input v-model="selectedField.name" />
              </a-form-item>
              <a-form-item label="标签文本">
                <a-input v-model="selectedField.label" />
              </a-form-item>
              <a-form-item label="占位符">
                <a-input v-model="selectedField.props.placeholder" />
              </a-form-item>
              <!-- 其他属性配置保持不变 -->
            </a-form>
          </a-card>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { VueDraggableNext } from 'vue-draggable-next'; 
import { 
  Input, 
  Select, 
  DatePicker, 
  Button, 
  Form, 
  FormItem, 
  Card, 
  Space
} from '@arco-design/web-vue';

// 组件列表保持不变
const componentList = [
  { type: 'a-input', label: '输入框' },
  { type: 'a-select', label: '下拉框' },
  { type: 'a-date-picker', label: '日期选择' },
];

// 表单字段数据
const formFields = ref([]);
let nextId = 1;

// 当前选中的字段
const selectedField = ref(null);

// 拖拽开始
const handleDragStart = (e, comp) => {
  e.dataTransfer.setData('text/plain', JSON.stringify(comp));
  e.dataTransfer.effectAllowed = 'copy';
  console.log('拖拽开始', comp);
  // 添加调试日志确认方法被调用
  console.log('handleDragStart方法被调用');
};

// 拖拽放入画布
const handleDrop = (e) => {
  // 修复数据类型不匹配问题
  const comp = JSON.parse(e.dataTransfer.getData('text/plain')); // 改为'text/plain'
  const newField = {
    id: nextId++,
    type: comp.type,
    name: `field_${nextId}`,
    label: comp.label,
    props: {
      placeholder: `请输入${comp.label}`,
      ...(comp.type === 'a-select' ? { options: [] } : {})
    }
  };
  formFields.value.push(newField);
  selectField(newField.id);
  console.log('组件已添加到画布', newField); // 添加调试日志
};

// 选择字段
const selectField = (id) => {
  selectedField.value = formFields.value.find(f => f.id === id);
};

// 删除字段
const removeField = (id) => {
  formFields.value = formFields.value.filter(f => f.id !== id);
  if (selectedField.value?.id === id) {
    selectedField.value = null;
  }
};

// 添加下拉选项
const addSelectOption = () => {
  if (selectedField.value?.type === 'a-select') {
    selectedField.value.props.options = selectedField.value.props.options || [];
    selectedField.value.props.options.push({ label: '', value: '' });
  }
};

// 导出 JSON Schema
const formSchema = computed(() => ({
  fields: formFields.value.map(f => ({
    type: f.type,
    name: f.name,
    label: f.label,
    props: f.props
  }))
}));

const exportSchema = () => {
  console.log('导出的 JSON:', JSON.stringify(formSchema.value, null, 2));
  // 实际项目中可以发送到后端或保存到文件
};

// 添加缺失的handleDragEnd方法
const handleDragEnd = () => {
  // 可以留空，或添加拖拽结束后的逻辑
  console.log('拖拽结束');
};
</script>

<style scoped>
/* arco-admin 风格样式 */
.form-designer {
  padding: 16px;
}

.arco-main-content {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.arco-sidebar {
  width: 240px;
}

.arco-content {
  flex: 1;
}

.arco-sidebar-right {
  width: 300px;
}

.arco-toolbar {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}

.arco-form-canvas {
  min-height: 400px;
  padding: 20px;
  background-color: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
}

.arco-empty-tip {
  color: #999;
  text-align: center;
  padding: 40px 0;
}

.arco-form-field {
  padding: 16px;
  margin-bottom: 16px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all 0.3s;
}

.arco-form-field:hover {
  border-color: #165dff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.arco-component-item {
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: move;
  transition: all 0.2s;
  background-color: #ffffff; /* 确保背景色为白色，与文本形成对比 */
  color: #333333; /* 确保文本颜色清晰可见 */
}

.arco-component-item:hover {
  background-color: #f0f7ff;
  border-color: #165dff;
  color: #165dff; /* 悬停时改变文本颜色 */
}

.arco-field-actions {
  position: absolute;
  right: 16px;
  top: 16px;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>